<!--车辆列表页-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="renderer" content="webkit">
<!-- TopJUI框架样式 -->
<link type="text/css" href="../../general/topjui/themes/default/topjui.core.min.css" rel="stylesheet">
<link type="text/css" href="../../general/topjui/themes/default/topjui.blue.css" rel="stylesheet" id="dynamicTheme" />
<!-- FontAwesome字体图标 -->
<link type="text/css" href="../../general/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<!-- layui框架样式 -->
<link type="text/css" href="../../general/static/plugins/layui/css/layui.css" 	rel="stylesheet" />
<!-- jQuery相关引用 -->
<script type="text/javascript" src="../../general/static/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../general/static/plugins/jquery/jquery.cookie.js"></script>
<!-- TopJUI框架配置 -->
<script type="text/javascript" src="../../general/static/public/js/topjui.config.js"></script>
<!-- TopJUI框架核心-->
<script type="text/javascript" src="../../general/topjui/js/topjui.core.min1.js"></script>
<!-- TopJUI中文支持 -->
<script type="text/javascript" src="../../general/topjui/js/locale/topjui.lang.zh_CN.js"></script>
<!-- layui框架js -->
<script type="text/javascript" src="../../general/static/plugins/layui/layui.js" charset="utf-8"></script>

<!--自定义的样式-->
<link type="text/css" href="../a_allcommon/all.css" 	rel="stylesheet" />

</head>
<body>
	<div class="page_box">
		<div class="query_box">
			<span style="padding: 10px;"></span>
			<a href="javascript:void(0)" data-toggle="topjui-menubutton"
			data-options="iconCls: 'fa fa-plus',btnCls:'topjui-btn-blue'" onclick="openAddDiag_carInfo()">新增</a>
			<span style="padding: 50px;"></span>
			<form id="queryForm">
				车牌号：
				<input type="text" name="q_license" data-toggle="topjui-textbox"
					data-options="id:'q_license',prompt:'请输入车牌号',width:150">
				<span style="padding: 5px;"></span>
				
				<span style="padding: 5px;"></span>
				<a href="javascript:doSubmit_carInfo(1,20)" data-toggle="topjui-menubutton"
					 data-options="iconCls:'fa fa-search',btnCls:'topjui-btn-blue'">查询</a> 
			</form>
		</div> <!--查询区div结束-->
		
		<div class="grid_box">
			<!-- datagrid表格（fitColumns:true表示限制滚动条，fitColumns:false表示允许滚动条）-->
			<table data-toggle="topjui-datagrid" class="productDg1" 
			       data-options="id:'carTable',fitColumns:true,remoteSort:false,rownumberWidth:39">
				<thead>
					<tr>
						<th data-options="field:'license',title:'车牌号',sortable:true,width:100,align:'center'"></th>
						<th data-options="field:'siteCount',title:'座位数',sortable:true,width:80,align:'center'"></th>
						<th data-options="field:'buyDate',title:'购买时间',sortable:true,width:150,align:'center'"></th>
						<th data-options="field:'operate',title:'操作',formatter:operateFormatter,width:150,align:'left'"></th>
					</tr>
				</thead>
			</table>
		</div> <!--表格区div结束-->
		
	</div>
<script>
$(function(){
	doSubmit_carInfo(1,20);//获取默认车辆表格数据
});

//表头“操作”栏，formatter定义，这里面可以自定义按钮样式
function operateFormatter(value, row, index) {
	//debugger;
	var htmlstr ='';
	htmlstr += '<button class="layui-btn layui-btn-xs" onclick="openEditDiag_carInfo(\''+row.carId+'\')">编辑</button>';
	htmlstr += '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteRow_carInfo(\''+row.carId+'\',\''+row.license+'\')">删除</button>';
	return htmlstr;
}
//新增车辆
function openAddDiag_carInfo(){
	var formData={}; //car_info_add.html
	var $addDialog = $('<form id="carDg-add" style="width: 500px; height:300px; margin: auto; display: none;"></form>');
	var diag = $addDialog.dialog({
		title: '新建车辆',
		href: 'car_info_add.html',
		modal: true,
		resizable:true,
		maximizable:true,
		collapsible:true,
		buttons:[{
			text:'保存',
			iconCls: 'fa fa-save',
			btnCls: 'topjui-btn-green',
			handler:function(){
				//验证框架（就是必填项必须要填）if开始			
				if($('#carDg-add').form('validate')) {
					//提示框开始
					$.messager.confirm("操作提示", "确定新建此车辆？", function (data) {
						if(data){
							//提交代码块开始
							var formData=$("#carDg-add").serialize();
							debugger;
							var url='/car/insertCar'; //接口地址
							debugger;
							$.iMessager.progress({
								text: '正在操作...'
							});
							$.post(url,formData,function (res,status) {
								$.iMessager.progress('close');//无论成功与否，都会关闭进度条；
								if (status == 'success') { // 后台返回状态值
									$.iMessager.show({title: '我的消息', msg: res.message, timeout: 2000, showType: 'slide'});// '消息窗口'组件
									//$("#carDg").iDatagrid('reload');// 刷新下表格数据
									//刷新表格数据采用主动请求的方式
									doSubmit_carInfo(1,20);
									diag.dialog("destroy");// 销毁dialog面板
								}else{
									$.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
								}
							},'JSON');
							//提交代码块结束
						}else {}
					});
					//提示框结束
				}
				//验证框架（就是必填项必须要填）if结束		
			}
		},{
			text:'关闭',
			iconCls: 'fa fa-close',
			btnCls: 'topjui-btn-red',
			handler:function(){diag.dialog("destroy");}
		}],
		onClose: function () {
			$(this).dialog('destroy');//销毁
		},
		onLoad :function(){
			
		}
	});
	$addDialog.dialog('open');
}
//编辑车辆
//打开编辑页面
function openEditDiag_carInfo(id){
	//先取实体对象
	$.ajax({
		url:"/car/getCar",
		dataType:"JSON",
		type:"POST",
		data:{
			carId:id,
		},
		success:function(data){
			openDialog(data.car);//调用下面的用于回显的打开对话框函数
		}
	});
}
//再打开编辑对话框：由openEditDiag(id)函数末尾调用
function openDialog(d){
	debugger;
	var $updateDialog = $('<form id="carDg-update"  style="width: 500px; height: 300px; margin: auto; display: none;"></form>');
	var diag = $updateDialog.dialog({
		title: '编辑车辆',
		href: 'car_info_add.html',
		modal: true,
		resizable:true,
		maximizable:true,
		collapsible:true,
		//按钮定义
		buttons:[{
			text:'保存',
			iconCls: 'fa fa-save',
			btnCls: 'topjui-btn-green',
			handler:function(){
				if($('#carDg-update').form('validate')) {
					var formData = $("#carDg-update").serialize();
					debugger;
					var url = '/car/updateCar';
					var carId=d.carId;
					$.iMessager.progress({
						text: '正在操作...'
					});
					$.post(url,formData+'&carId='+carId,function (res,status) {
						$.iMessager.progress('close');//无论成功与否，都会关闭进度条；
						if(status == 'success'){ // 后台返回状态值
							$.iMessager.show({title: '我的消息', msg: res.message, timeout: 2000, showType: 'slide'});// '消息窗口'组件
								//$("#carDg").iDatagrid('reload');// 刷新下表格数据
								//刷新表格数据采用主动请求的方式
								doSubmit_carInfo(1,20);
								diag.dialog("destroy");// 销毁dialog面板
						} else {
								$.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
						}
					},'JSON');
				}
			}
		},{
			text:'关闭',
			iconCls: 'fa fa-close',
			btnCls: 'topjui-btn-red',
			handler:function(){diag.dialog("destroy");}
		}], //按钮定义结束
		
		//对话框函数定义
		onClose: function () {
			$(this).dialog('destroy');//销毁
		},
		onLoad :function(){
			$('#carDg-update').form('load',d);//再回显数据
		}
	}); //dialog定义结束
	$updateDialog.dialog('open');
}
//删除车辆
function deleteRow_carInfo(id,license){
	//debugger;
	$.messager.confirm("操作提示", "是否删除车牌号为："+license+"的车辆？", function (data) {
		if(data) {
			$.iMessager.progress({
				text: '正在操作...'
			});
			$.post("/car/delCar",{"carId":id},function(res,status){
				$.iMessager.progress('close');//无论成功与否，都会关闭进度条；
				if (status == 'success') { // 后台返回状态值
					$.iMessager.show({title: '我的消息', msg: res.message, timeout: 2000, showType: 'slide'});// '消息窗口'组件
					//$("#carDg").iDatagrid('reload');// 刷新下表格数据（carDg是上面数据表格的id）
					//刷新表格数据采用主动请求的方式
					doSubmit_carInfo(1,20);
				}else {
					$.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
				}
			},'JSON');
		}else {}
	});
}

/*************************************表格相关方法****************************************/
/********使用ajax返回的数据的方式加载表格（如下2个主要方法）*******/
//表格主查询（包含条件查询）
function doSubmit_carInfo(pageIndex,pageSize){
	var formData={};
	formData.pageIndex=pageIndex;
	formData.pageSize=pageSize;
	//1：取查询参数
	var license=$('#q_license').iTextbox('getValue').trim();
	if(license!=''){
		formData.license=license;
	}
	debugger;
	//2：执行ajax查询请求
	$.ajax({
		url:"/car/getCarList",
		dataType:"JSON",
		type:"POST",
		data:formData,
		success:function(data){
			console.log(data.rows);
			debugger;
			//3：fillDatagrid(data)函数加载表格
			fillDatagrid(data);//调用分页表格数据加载主函数
		}
	});
}

/********使用ajax返回的数据的方式加载表格（如下2个主要方法）*******/
//参数为ajax调用的返回值
function fillDatagrid(data){
	//第1步：取基础参数
	var rows=data.rows;
	var pageIndex=data.pageIndex;
	var pageSize=data.pageSize;
	//第2步：初始化表格
	$('#carTable').datagrid({   
			url:null,
			data:data, //参数传过来的data就有了数据array，页码，页尺寸
			pagination:true,   
			pageSize:pageSize,   
			pageNumber:pageIndex,   
			rownumbers:true  
	});
	//第二步：再取分页对象，并定义点击分页按钮触发的事件（并使用自定义）
	$('#carTable').datagrid('getPager').pagination({   
			onSelectPage : function(pPageIndex, pPageSize) {   
				//alert('页数:'+pPageIndex+',每页数据条数:'+pPageSize);
				doSubmit_carInfo(pPageIndex,pPageSize);
			}   
	});
}
/********使用ajax返回的数据的方式加载表格（如上2个主要方法）*******/

</script>
</body>
</html>